<template>
  <div>
    <PageTool :show-before="false">
      <template #after>
        <el-button type="primary" size="small" @click="addEmployee">添加员工</el-button>
      </template>
    </PageTool>
    <el-card>
      <el-table
        :data="employessList"
        style="width: 100%"
        :fit="true"
      >
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="assigRole(row.id)">设置角色</el-button>
            <el-button size="small" @click="editEmployee(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delEmployee(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev,pager,next"
          :page-size="limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <el-dialog title="新增部门" :visible="showDialog" @close="closeFn">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="closeFn">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
    <el-dialog title="编辑部门" :visible="showDialog2" @close="closeFn">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submitedit">确认</el-button>
          <el-button @click="closeFn">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
    <!-- 分配角色 -->
    <AssignRole ref="assignRole" :visible-dialog.sync="visibleDialog" />
  </div>
</template>
<script>
import { getEmployeeList, getEmployeeCount, getSimperEmployee, delEmployee, editEmployee } from '@/api/employees'
import { register } from '@/api/register'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AssignRole },
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        image: '',
        roles: []
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '姓名长度1到10位', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { min: 1, max: 25, message: '邮箱格式不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'change' }
        ]
      },
      visibleDialog: false,
      employessList: [],
      total: 0,
      limit: 2,
      start: 0,
      showDialog: false,
      showDialog2: false
    }
  },
  inject: ['reload'],
  async created() {
    await this.empList()
    await this.empListCount()
  },
  methods: {
    async empList() {
      const res = await getEmployeeList({
        _limit: this.limit,
        _start: this.start
      })
      this.employessList = res.data
    },
    async empListCount() {
      const result = await getEmployeeCount()
      this.total = result.data
    },
    closeFn() {
      this.showDialog = false
      this.showDialog2 = false
      this.form = {
        username: '',
        email: '',
        password: ''
      }
      this.$refs.form.resetFields()
    },
    submit() {
      this.$refs.form.validate(async bool => {
        await register(this.form)
        this.closeFn()
        this.reload()
      })
    },
    submitedit() {
      this.$refs.form.validate(async bool => {
        await editEmployee(this.form)
        this.closeFn()
        this.reload()
      })
    },
    addEmployee() {
      this.showDialog = true
    },
    delEmployee(id) {
      this.$confirm('确定要删除该员工吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        this.empList()
      })
    },
    async editEmployee(id) {
      this.showDialog2 = true
      const res = await getSimperEmployee(id)
      // console.log(res)
      this.form = res.data
    },
    currentChange(page) {
      this.start = (page - 1) * this.limit
      this.empList()
    },
    assigRole(id) {
      this.visibleDialog = true
      this.$refs.assignRole.getEmployee(id)
    }
  }
}
</script>
<style scoped lang="scss">
.el-card{
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 20px;
}
</style>
